<template>
	<view >

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			:up="upOption" :top="0" :bottom="0" :topbar="false" :bottombar="true" :fixed="true" height="100%"
			:safearea="false" :sticky="true" @emptyclick="emptyClick" @topclick="topClick" @scroll="scroll">
			<!-- <view class="tip">展示down和up的所有配置项</view>
		<view class="tip" @click="triggerDownScroll">点此主动触发下拉刷新</view>
		<view class="tip" @click="scrollToY(200)">点此测试滚动到指定位置 (如: 200px)</view> -->
			<!-- 滚动到本页元素,只需普通的id或class选择器即可 -->
			<!-- <view class="tip" @click="scrollIntoView('#anchorPoint')" id="anchorPoint">点此测试滚动到指定view (元素在本页)</view> -->
			<!-- 滚动到子组件,小程序必须用'跨自定义组件的后代选择器' -->
			<!-- <view class="tip" @click="scrollIntoView('.good-comp >>> #good2')">点此测试滚动到指定view (元素在子组件)</view> -->

			<!-- sticky吸顶悬浮的菜单 (父元素必须是 mescroll, 且mescroll配置:sticky="true") -->
						<view style="z-index:9999" class=" sticky-tabs">
						<view class="padding-top-sm radius shadow bg-white">
							<view class="">
								<me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></me-tabs>
							</view>
						</view>
					<!-- 	<view class="padding-xl radius shadow bg-blue margin-top">根据背景颜色而改变的阴影</view>
						<view class="padding-xl radius shadow shadow-lg bg-white margin-top">长阴影</view>
						<view class="padding-xl radius shadow shadow-lg bg-blue margin-top">长阴影</view>
						<view class="padding-xl radius shadow-warp bg-white margin-top">翘边阴影</view>
						<view class="padding-xl radius shadow-blur bg-red margin-top bg-img" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91005.jpg);">
							<view>根据背景图而改变的阴影</view>
						</view> -->
					</view>
		


			<!-- 视频请尽量使用me-video组件 (video在APP中是原生组件, 真机APP端下拉渲染不及时.) -->
			<!-- 使用me-video组件, 未播放时自动展示image封面, 播放时才显示video, 提高性能; 当加上 :mescroll="mescroll"之后, 如果播放中执行下拉,会自动隐藏视频,显示封面,避免视频下拉悬浮错位(仅APP端这样处理) -->
			<!-- <me-video v-if="tabIndex==0" :mescroll="mescroll" poster="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-mescroll/2e3cd7a0-f31a-11ea-81ea-f115fe74321c.png" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-mescroll/2ae5d090-f26e-11ea-81ea-f115fe74321c.mp4"></me-video> -->
			<!-- 愿望森林 -->
			<!-- <todo-item class="good-comp" v-if="tabIndex==0" :list.sync="todoList"></todo-item> -->
			<todo-item class="good-comp" v-if="tabIndex==0" :list.sync="todoList"></todo-item>
			<!-- 备忘 -->
			<my-notes class="good-comp" v-if="tabIndex==1" :list.sync="todoList"></my-notes>

			<!-- 添加任务按钮 -->

			<button @click="addToDo" class="cu-btn lg cuIcon fixed-button-my">
				<text class="cuIcon-add text-bold"></text>
			</button>


		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	// import { apiGoods } from "@/api/mock.js";
	import {
		checkUserStatus,
		query_todo_item,
		query_notes_by_user_id
	} from "@/common/api.js";

	export default {
		mixins: [MescrollMixin], // 使用mixin
		onShow() {
			this.mescroll.resetUpScroll();
		},
		onLoad() {

			let that = this;
			// 检查本地存储是否有用户id,有的话拿着id去查询数据库,查到用户信息并切用户状态为可用,把用户信息存入store
			try {
				const userInfo = uni.getStorageSync("userInfo");

				if (userInfo) {
					console.log(userInfo, "本地存储获取到了userInfo");
					// 拿着id去查询数据库,查到用户信息并用户状态为可用,把用户信息存入store
					checkUserStatus(userInfo.id)
						.then((res) => {
							console.log(res, "检查用户状态res");
							if (res.data.user.length === 0) {
								uni.reLaunch({
									url: "/pages/login/index",
								});

								return;
							}
							// 判断用户状态,禁用就返回
							if (res.data.user[0].user_status === 0) {
								uni.showToast({
									icon: "error",
									title: "账号被禁用!",
								});

								uni.reLaunch({
									url: "/pages/stop/index",
								});

								return false;
							}

							// 把用户信息存入store
							// that.setUser(res.data.data.user[0])

							getApp().globalData.userInfo = res.data.user[0];
							uni.setStorageSync('userInfo', res.data.user[0])



							// 查询目标,需要带着userId去查询
							that.mescroll.resetUpScroll();
						})
						.catch((err) => {
							console.log(err, "检查用户状态err");
						});
				} else {
					console.log("本地存储没有获取到userInfo,跳转到登录页面");
					uni.navigateTo({
						url: "/pages/login/index",
					});
				}
			} catch (e) {
				// error
				console.log(e, "uni.getStorageSync('userInfo');");
			}
		},

		methods: {
			// 添加任务
			addToDo() {
				uni.navigateTo({
					url: "/pages/index/todo-item-add?type=add",
				});
			},
			/**
			 * 组件
			 */
			/*下拉刷新的回调 */
			downCallback() {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {

				//联网加载数据
				let curTab = this.tabs[this.tabIndex];
				let keyword = curTab.name; // 具体项目中,您可能取的是tab中的type,status等字段

				console.log(curTab,keyword,this.tabIndex);
				// apiGoods(page.num, page.size, keyword)
				//   .then((res) => {
				//     //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
				//     //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;

				//     //方法一(推荐): 后台接口有返回列表的总页数 totalPage
				//     //this.mescroll.endByPage(res.list.length, res.totalPage); //必传参数(当前页的数据个数, 总页数)

				//     //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
				//     //this.mescroll.endBySize(res.list.length, res.totalSize); //必传参数(当前页的数据个数, 总数据量)

				//     //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
				//     //this.mescroll.endSuccess(res.list.length, res.hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)

				//     //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
				//     this.mescroll.endSuccess(res.list.length);

				//     //设置列表数据
				//     if (page.num == 1) this.todoList = []; //如果是第一页需手动制空列表
				//     this.todoList = this.todoList.concat(res.list); //追加新数据
				//   })
				//   .catch(() => {
				//     //联网失败, 结束加载
				//     this.mescroll.endErr();
				//   });
				this.variables.offset = page.num - 1;
				this.variables.limit = page.size;
				this.variables.todo_date = {
					_eq: this.$moment().format("yyyy-MM-DD"),
				};

				switch (curTab.type) {
					
					case "todo_item_my":
						// 获取我的森林列表
						this.variables.where = {
							user_id: {
								'_eq': getApp().globalData.userInfo.id
							}
						}
						// delete this.variables.where.todo_item_show
						// delete this.variables.where.todo_item_status
						query_todo_item(this.variables)
							.then((res) => {
								console.log(res, "查询目标res");
								if (res.code === 200) {
									this.mescroll.endBySize(
										res.data.todo_item.length,
										res.data.todo_item_aggregate.aggregate.count
									);
									if (page.num == 1) this.todoList = []; //如果是第一页需手动制空列表
									this.todoList = this.todoList.concat(res.data.todo_item); //追加新数据
								} else {
									uni.showToast({
										icon: "error",
										title: "获取目标列表失败!",
									});
								}
							})
							.catch((err) => {
								//联网失败, 结束加载
								this.mescroll.endErr();
								console.log(err, "查询目标err");
								uni.showToast({
									icon: "error",
									title: "获取目标列表失败catch!",
								});
							});

						break;
					case "todo_item":
						// 获取愿望森林愿望列表
						delete this.variables.where.user_id
						this.variables.where = {
							todo_item_show: {
								_eq: true
							},
							todo_item_status: {
								_neq: 3,
							}
						}
						query_todo_item(this.variables)
							.then((res) => {
								console.log(res, "查询目标res");
								if (res.code === 200) {
									this.mescroll.endBySize(
										res.data.todo_item.length,
										res.data.todo_item_aggregate.aggregate.count
									);
									if (page.num == 1) this.todoList = []; //如果是第一页需手动制空列表
									this.todoList = this.todoList.concat(res.data.todo_item); //追加新数据
								} else {
									uni.showToast({
										icon: "error",
										title: "获取目标列表失败!",
									});
								}
							})
							.catch((err) => {
								//联网失败, 结束加载
								this.mescroll.endErr();
								console.log(err, "查询目标err");
								uni.showToast({
									icon: "error",
									title: "获取目标列表失败catch!",
								});
							});

						break;
					case "notes":
						console.log(
							curTab.type,
							"获取数据2---------------------------------->>>"
						);
						
						let  variables1 = {
							user_id:getApp().globalData.userInfo.id,
							offset:this.variables.offset,
							limit:this.variables.limit
						}
						query_notes_by_user_id(variables1)
							.then((res) => {
								console.log(res, "查询备忘res");
								console.log(res,'||||||||||||||||||||||||');
								
								if (res.data.notes) {
									this.mescroll.endBySize(
										res.data.notes.length,
										res.data.notes_aggregate.aggregate.count
									);
									if (page.num == 1) this.todoList = []; //如果是第一页需手动制空列表
									this.todoList = this.todoList.concat(res.data.notes); //追加新数据
								} else {
									uni.showToast({
										icon: "error",
										title: "获取备忘失败!",
									});
								}
							})
							.catch((err) => {
								//联网失败, 结束加载
								this.mescroll.endErr();
								console.log(err, "查询备忘err");
								uni.showToast({
									icon: "error",
									title: "获取备忘失败catch!",
								});
							});

						break;

					default:
						break;
				}
			},
			// 点击空布局按钮的回调
			emptyClick() {
				uni.navigateTo({
					url: "/pages/index/todo-item-add?type=add",
				});
			},
			// 点击回到顶部按钮的回调
			topClick() {
				console.log("点击了回到顶部按钮");
			},
			// mescroll-uni滚动事件 (需在up配置onScroll:true才生效, mescroll-body直接声明onPageScroll)
			scroll() {
				console.log(
					"mescroll元素id: " +
					this.mescroll.viewId +
					" , 滚动内容高度:" +
					this.mescroll.getScrollHeight() +
					", mescroll高度:" +
					this.mescroll.getClientHeight() +
					", 滚动条位置:" +
					this.mescroll.getScrollTop() +
					", 距离底部:" +
					this.mescroll.getScrollBottom() +
					", 是否向上滑:" +
					this.mescroll.isScrollUp
				);
			},
			// 切换菜单
			tabChange() {

				
				this.todoList = []; // 先置空列表,显示加载进度
				this.mescroll.resetUpScroll(); // 再刷新列表数据
			},
			// 主动触发下拉刷新
			triggerDownScroll() {
				this.mescroll.triggerDownScroll();
			},
			// 滚动到指定位置,传数字 (单位px)
			scrollToY(y) {
				// this.mescroll.scrollTo(y) // 过渡动画时长默认300ms
				this.mescroll.scrollTo(y, 0); // 无过渡动画
			},
			// 滚动到指定view,传view的id
			scrollIntoView(viewId) {
				// this.mescroll.scrollTo(viewId) // 过渡动画时长默认300ms
				this.mescroll.scrollTo(viewId, 0); // 无过渡动画
			},

			// mescroll-body的滚动事件是页面的滚动事件
			// onPageScroll(e){
			// 	console.log("mescroll-body的滚动事件e.scrollTop=" + e.scrollTop);
			// }
		},
		computed: {},


		data() {
			return {
				// 组件
				downOption: {
					use: false, // 是否启用下拉刷新; 默认true
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					native: false, // 是否使用系统自带的下拉刷新; 默认false; 仅mescroll-body生效 (值为true时,还需在pages配置enablePullDownRefresh:true;详请参考mescroll-native的案例)
					autoShowLoading: false, // 如果设置auto=true(在初始化完毕之后自动执行下拉刷新的回调),那么是否显示下拉刷新的进度; 默认false
					isLock: false, // 是否锁定下拉刷新,默认false;
					offset: 80, // 在列表顶部,下拉大于80upx,松手即可触发下拉刷新的回调
					inOffsetRate: 1, // 在列表顶部,下拉的距离小于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
					outOffsetRate: 0.2, // 在列表顶部,下拉的距离大于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
					bottomOffset: 20, // 当手指touchmove位置在距离body底部20upx范围内的时候结束上拉刷新,避免Webview嵌套导致touchend事件不执行
					minAngle: 45, // 向下滑动最少偏移的角度,取值区间  [0,90];默认45度,即向下滑动的角度大于45度则触发下拉;而小于45度,将不触发下拉,避免与左右滑动的轮播等组件冲突;
					beforeEndDelay: 0, // 延时结束的时长 (显示加载成功/失败的时长, android小程序设置此项结束下拉会卡顿, 配置后请注意测试)
					bgColor: "#c0c0c0", // 背景颜色 (建议在pages.json中再设置一下backgroundColorTop)
					textColor: "#fff", // 文本颜色 (当bgColor配置了颜色,而textColor未配置时,则textColor会默认为白色)
					textInOffset: "下拉刷新", // 下拉的距离在offset范围内的提示文本
					textOutOffset: "释放更新", // 下拉的距离大于offset范围的提示文本
					textLoading: "加载中 ...", // 加载中的提示文本
				},
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					isLock: false, // 是否锁定上拉加载,默认false;
					isBoth: true, // 上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认true,两者可同时触发;
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10, // 每页数据的数量
						time: null, // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
					},
					noMoreSize: 3, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
					offset: 80, // 距底部多远时,触发upCallback(仅mescroll-uni生效, 对于mescroll-body则需在pages.json设置"onReachBottomDistance")
					bgColor: "transparent", // 背景颜色 (建议在pages.json中再设置一下backgroundColorTop)
					textColor: "gray", // 文本颜色 (当bgColor配置了颜色,而textColor未配置时,则textColor会默认为白色)
					textLoading: "加载中 ...", // 加载中的提示文本
					textNoMore: "-- END --", // 没有更多数据的提示文本
					toTop: {
						// 回到顶部按钮,需配置src才显示
						src: "https://www.mescroll.com/img/mescroll-totop.png", // 图片路径
						offset: 1000, // 列表滚动多少距离才显示回到顶部按钮,默认1000
						duration: 300, // 回到顶部的动画时长,默认300ms (当值为0或300则使用系统自带回到顶部,更流畅; 其他值则通过step模拟,部分机型可能不够流畅,所以非特殊情况不建议修改此项)
						zIndex: 9990, // fixed定位z-index值
						left: null, // 到左边的距离, 默认null. 此项有值时,right不生效. (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
						right: 20, // 到右边的距离, 默认20 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
						bottom: 120, // 到底部的距离, 默认120 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
						safearea: false, // bottom的偏移量是否加上底部安全区的距离, 默认false, 需要适配iPhoneX时使用 (具体的界面如果不配置此项,则取mescroll组件props的safearea值)
						width: 72, // 回到顶部图标的宽度, 默认72 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
						radius: "50%", // 圆角, 默认"50%" (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
					},
					empty: {
						use: false, // 是否显示空布局
						icon: "https://www.mescroll.com/img/mescroll-empty.png", // 图标路径
						tip: "~ 没有任务 ~", // 提示
						btnText: "去添加 >", // 按钮
						fixed: false, // 是否使用fixed定位,默认false; 配置fixed为true,以下的top和zIndex才生效 (transform会使fixed失效,最终会降级为absolute)
						top: "100rpx", // fixed定位的top值 (完整的单位值,如 "10%"; "100rpx")
						zIndex: 99, // fixed定位z-index值
					},
					onScroll: false, // 是否监听滚动事件, 默认false, 仅mescroll-uni生效; mescroll-body直接声明onPageScroll (配置为true时,可@scroll="scroll"获取到滚动条位置和方向; 注意监听列表滚动是非常耗性能的,很容易出现卡顿,非特殊情况不要配置此项)
				},

				tabs: [
					// {
					// 	name: "愿望森林",
					// 	type: "todo_item",
					// 	value: 0
					// },
					{
						name: "待办",
						type: "todo_item_my",
						value: 0
					},
					{
						name: "备忘",
						type: "notes",
						value: 1
					},
				],
				tabIndex: 0, // tab下标
				// 目标列表
				todoList: [],
				// 查询变量
				variables: {
					offset: 0,
					limit: 10,
					order_by: {
						sort: "desc",
						created_at: "desc"
					},

					where: {
						todo_item_show: {
							_eq: true
						},
						todo_item_status: {
							_neq: 3,
						},
					},
				},
				currentIndex: 0,
				current: 0,
				list2: [{
						name: "目标",
					},
					{
						name: "总结",
						badge: {
							isDot: true,
						},
					},
					{
						name: "备忘",
						badge: {
							value: 5,
						},
					},
				],
			};
		},
	};
</script>
<style lang="scss" scoped>
	.tip {
		font-size: 28upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
	}

	.sticky-tabs {
		z-index: 990;
		position: sticky;
		top: var(--window-top);
		// background-color: #fff;
	}

	.todo_list {
		// background: linear-gradient(to top right, #ff4400, blue); // 对角
		// background: linear-gradient( rgb(255, 123, 0), rgb(2, 255, 171));
		height: 90vh;
		width: 100%;
		display: flex;
		flex-direction: row;

		.left {
			width: 10%;
			height: 100%;
			background: $uni-color-success;
		}

		.right {
			width: 90%;
			height: 100%;
			background: $uni-bg-color-grey;
		}
	}

	.fixed-button-my {
		position: fixed;
		bottom: 20rpx;
		right: 18rpx;
		z-index: 9999;
	}
</style>
